<template>
  <div class="page">
    <navigation>{{ $t('转出') }} {{ coinSymbol }}</navigation>
    <div class="page-space"></div>
    <div class="form">
      <wallet-addr-input name="wallet_addr" :unit="coinSymbol" @changeInput="updateWithdrawParam" />
      <amount-input :restrictions="restrictions" name="value" @changeInput="updateWithdrawParam" />
      <verify-code-input name="code" @changeInput="updateWithdrawParam"/>
      <div class="input-group">
        <span class="input">{{ $t('手续费') }}：{{ restrictions.withdraw_fee }} {{ coinSymbol }}</span>
      </div>
      <div class="input-group">
        <input v-model="withdrawParams.memo" type="text" class="input" :placeholder="$t('备注（选填）')" />
      </div>
    </div>
    <div class="sticky">
      <div class="button" @click="handleSubmit">{{ $t('提交') }}</div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import navigation from '@/components/Navigation'
import walletAddrInput from '@/components/partials/withdraw/WalletAddrInput'
import amountInput from '@/components/partials/withdraw/AmountInput'
import verifyCodeInput from '@/components/partials/withdraw/VerifyCodeInput'
export default {
  components: { navigation, walletAddrInput, verifyCodeInput, amountInput },
  data () {
    const coinSymbol = this.$route.query.coin
    return {
      loading: false,
      coinSymbol,
      restrictions: {},
      withdrawParams: {
        coin_symbol: coinSymbol,
        wallet_addr: '',
        value: '',
        memo: '',
        code: ''
      }
    }
  },
  beforeMount () {
    this.bankWithdrawPrepare({ coin_symbol: this.coinSymbol })
      .then(({ data }) => {
        this.restrictions = data
      })
  },
  methods: {
    ...mapActions({
      bankWithdrawPrepare: 'fund/bankWithdrawPrepare',
      withdrawTurnOut: 'fund/withdrawTurnOut'
    }),
    handleSubmit () {
      if (this.loading) { return }
      do {
        if (!this.withdrawParams.wallet_addr) {
          this.errmsg = this.$t('请输入提币地址')
          break
        }
        if (!this.withdrawParams.value) {
          this.errmsg = this.$t('请输入提币数量')
          break
        }
        if (!this.withdrawParams.code) {
          this.errmsg = this.$t('请输入验证码')
          break
        }
      } while (false)
      if (this.errmsg) {
        this.$toast.error(this.errmsg)
        this.errmsg = ''
        return
      }
      const succeed = (data) => {
        this.loading = false
        this.$toast.success(data.message)
        this.$router.back()
      }
      const failed = (data) => {
        this.loading = false
        this.$toast.error(data.message)
      }
      this.loading = true
      this.withdrawTurnOut(this.withdrawParams)
        .then(succeed)
        .catch(failed)
    },
    updateWithdrawParam (name, value) {
      this.withdrawParams[name] = value
    }
  }
}
</script>
<style scoped>
* {
  box-sizing: border-box;
}
.page {
  background-color: #f1f4fb;
  min-height: 100vh;
}
.form {
  background-color: #fff;
  padding: 20px 10px 2px 10px;
}
.input-group {
  display: flex;
  margin-bottom: 12px;
}
.input {
  flex: 1;
  height: 48px;
  line-height: 48px;
  font-size: 15px;
  padding-left: 4px;
  background-color: #f4f4f4;
  border: 1px solid #f4f4f4;
}
.input:focus {
  border: 1px solid #76bdf3;
}
.input-right {
  margin-left: 10px;
  width: 36px;
}
.w-80 {
  width: 80px;
}
.link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.sticky {
  position: fixed;
  width: 100%;
  bottom: 0;
}
.button {
  width: 100%;
  height: 40px;
  background-color: #1a85d7;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 4px;
}
.button.disabled {
  opacity: 0.7;
}
</style>
